<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="query">
      <!-- 模板组：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select>
      模板：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select>
      科室：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select>
      质控级别：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select>
      <p></p>
      状态：
      <el-select v-model="query.value" placeholder="" size="mini">
        <el-option label="test" value="test"> </el-option>
      </el-select> -->
      开始日期：
      <el-date-picker
        v-model="query.startTime"
        size="mini"
        type="datetime"
        placeholder="选择日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      结束日期：
      <el-date-picker
        v-model="query.endTime"
        size="mini"
        type="datetime"
        placeholder="选择日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <!-- 任务名称：
      <el-input
        v-model="query.input"
        placeholder=""
        size="mini"
        style="width: 150px"
      ></el-input> -->
      机构：
      <el-cascader
        size="mini"
        :options="OrganTree"
        :props="{
          checkStrictly: true,
          value: 'Id',
          label: 'Name',
          children: 'Children',
        }"
        clearable
        v-model="checkHospitalId"
        @change="query.orgId = checkHospitalId[checkHospitalId.length - 1]"
      ></el-cascader>
      <el-button
        plain
        size="mini"
        icon="el-icon-back"
        @click="black_page"
        :disabled="table_index == 1"
        >返回</el-button
      >
      <el-button
        plain
        size="mini"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList"
        >查询</el-button
      >

      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="open_dialog('新增')"
        >新增</el-button
      > -->
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-edit"
        type="warning"
        @click="open_dialog('提交')"
        >提交</el-button
      > -->
      <!-- <el-button plain size="mini" icon="el-icon-delete" type="danger"
        >删除</el-button
      > -->
    </div>
    <div class="table" v-if="table_index == 1 && !istask">
      <el-table
        v-if="table_index == 1"
        :data="tableData"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column prop="Name" label="机构">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 2), (query.type = 1), getList()"
                >{{ scope.row.Name }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="进度">
          <template slot-scope="scope">
            <span> {{ scope.row.Data.进度 }} </span>/<span>
              {{ scope.row.Data.总进度 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="Data.平均分" label="平均分数">
          <template slot-scope="scope"> {{ scope.row.Data.平均分 }} </template>
        </el-table-column>
        <el-table-column prop="不及格数" label="不及格数">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 3), getList2('不及格')"
                >{{ scope.row.Data.不及格数 }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="及格数" label="及格数">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 3), getList2('及格')"
                >{{ scope.row.Data.及格数 }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="满分数" label="满分数">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 3), getList2('满分')"
                >{{ scope.row.Data.满分数 }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="及格率" label="及格率">
          <template slot-scope="scope">
            {{
              (scope.row.Data.及格数 / scope.row.Data.总进度) * 100
                ? (scope.row.Data.及格数 /
                    (scope.row.Data.及格数 + scope.row.Data.不及格数)) *
                    100 +
                  "%"
                : "-"
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table" v-if="table_index == 2 && !istask">
      <el-table
        v-if="table_index == 2"
        :data="tableData"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column prop="Name" label="机构">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 2), (query.type = 1), getList()"
                >{{ scope.row.Name }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="进度">
          <template slot-scope="scope">
            <span> {{ scope.row.Data.进度 }} </span>/<span>
              {{ scope.row.Data.总进度 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="Data.平均分" label="平均分数">
          <template slot-scope="scope"> {{ scope.row.Data.平均分 }} </template>
        </el-table-column>
        <el-table-column prop="不及格数" label="不及格数">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 3), getList2('不及格')"
                >{{ scope.row.Data.不及格数 }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="及格数" label="及格数">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 3), getList2('及格')"
                >{{ scope.row.Data.及格数 }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="满分数" label="满分数">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button
                type="text"
                @click="(table_index = 3), getList2('满分')"
                >{{ scope.row.Data.满分数 }}</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="及格率" label="及格率">
          <template slot-scope="scope">
            {{
              (scope.row.Data.及格数 / scope.row.Data.总进度) * 100
                ? (scope.row.Data.及格数 /
                    (scope.row.Data.及格数 + scope.row.Data.不及格数)) *
                    100 +
                  "%"
                : "-"
            }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table" v-if="table_index == 3 && istask">
      <el-table
        v-if="table_index == 3"
        :data="tableData2"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column prop="操作" label="操作">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button type="text" @click="to_Ti2(scope.row)">查看</el-button>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="Task.Name" label="任务名称"> </el-table-column>
        <el-table-column prop="Task.TemplateGroupName" label="模板组">
        </el-table-column>
        <el-table-column prop="Task.TemplateName" label="模板名称">
        </el-table-column>
        <el-table-column prop="TaskData.CreateTime" label="填写时间">
        </el-table-column>
      </el-table>
    </div>
    <div class="page" v-if="false">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange_page"
        :current-page="query.CurrentPage"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      >
      </el-pagination>
    </div>
    <!-- 弹层 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <table border="1" style="width: 100%">
        <tr>
          <td class="tac">意见：</td>
          <td>
            <el-input type="textarea" :rows="6" v-model="form.意见"></el-input>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini" type="success"
          >审 核</el-button
        >
        <el-button type="danger" @click="btn_ok" size="mini">驳 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {
        startTime: "",
        endTime: "",
        systemCategory: "门诊满意度",
        type: 0,
        orgId: "",
      },
      tableData: [],
      tableData2: [],
      dialogVisible: false,
      dialog_title: "",
      row_info: null,
      form: {},
      OrganTree: [],
      checkHospitalId: window.localStorage.getItem("hospitalId"),
      table_index: 1,
      istask: false,
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    // this.getList();
    this.getOrgan();
  },
  filters: {
    toStatus(val) {
      var str = "";
      if (val == 0) {
        str = "未发布";
      }
      if (val == 1) {
        str = "开始调查";
      }
      if (val == 10) {
        str = "继续调查";
      }
      if (val == 20) {
        str = "待提交";
      }
      if (val == 30) {
        str = "已提交";
      }
      if (val == 31) {
        str = "原因分析";
      }
      if (val == 32) {
        str = "病区跟踪检查";
      }
      if (val == 33) {
        str = "护理部跟踪检查";
      }
      if (val == 40) {
        str = "完成";
      }
      if (val == 41) {
        str = "审核通过";
      }
      if (val == 42) {
        str = "归档";
      }
      return str;
    },
  },
  methods: {
    getOrgan() {
      this.$get(
        "/Task/GetOrganTree?id=" + window.localStorage.getItem("hospitalId2")
      ).then((res) => {
        this.OrganTree = res.Data;
      });
    },
    getList() {
      this.$post("/Tj/Tj", this.query).then((res) => {
        this.tableData = res.Data;
        this.istask = false;
        // this.query.total = res.Data.Total;
      });
    },
    getList2(val) {
      var body = {
        currentPage: 1,
        pageSize: 999,
        filter: {
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          systemCategory: "门诊满意度",
          type: this.query.type,
          orgId: this.query.orgId,
          dataType: val,
        },
        tableName: "",
      };
      this.$post("/Tj/GetTaskDataPageList", body).then((res) => {
        this.tableData2 = res.Data.PageList;
        this.$nextTick((_) => {});
        this.istask = true;
        console.log(this.tableData);
      });
    },
    open_windo(url) {
      window.open(url);
    },
    row_click(row) {
      if (!row) {
        this.row_info = null;
        return;
      }
      this.row_info = row;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    btn_ok() {
      this.handleClose();
    },
    open_dialog(val) {
      this.dialog_title = val + "模板组";
      if (val == "新增") {
        this.dialogVisible = true;
        return;
      }
      if (val == "提交" && this.row_info) {
        this.form = this.row_info;
        this.dialogVisible = true;
      } else {
        this.$notify.error({
          title: "错误",
          message: "请选择一条数据后操作！",
        });
        return;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
    },
    handleCurrentChange_page(val) {
      this.query.CurrentPage = val;
      this.getList();
    },
    to_Ti(row) {
      if (this.$route.query.ipad) {
        this.$router.push("/IPAD/Ti_myd?btn=1&taskDataId=" + row.Id);
      } else {
        this.$router.push("/Ti_myd?btn=1&taskDataId=" + row.Id);
      }
    },
    to_Ti2(row) {
      this.$router.push(
        "/Ti_myd?btn=2&taskDataId=" + row.Task.Id + "&Sort=" + row.TaskData.Sort
      );
    },
    black_page() {
      if (this.table_index > 1) {
        this.query.type = 0;
        this.getList();
        this.table_index = 1;
      }
      // this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
</style>